<template>
  <div class="body_">
    <div class="centered">
      <span class="school_name">{{ schoolData.projectName }}</span>
      <div class="content">
        <div class="image_container">
          <img :src="schoolData.logo" alt="Image Description">
        </div>
        <div class="text_container">
          <span class="two_text">认证机构 </span><span class="two_name">{{ schoolData.issuingAuthority }}</span><br>
          <span class="two_text">培训机构 </span><span class="two_name">{{ schoolData.universityName }}</span>
        </div>
      </div>
      <div class="three_text">
        <span>{{ schoolData.type }} |</span>
        <span> {{ schoolData.schoolFaculty }} |</span>
        <span> {{ schoolData.features }} |</span>
        <span style="float: right;color: black;"><a>了解更多></a></span>
      </div>
      <!-- <div class="image_">
        <img
          src="https://eeoone-saas-prod.oss-cn-shenzhen.aliyuncs.com/379191899378599944/348297353509752872/common/2023/12/18/1702707997948~4bc59e71-2d8e-429a-af60-2a99d02beb83~.jpg"
          alt="">
        <img
          src="https://eeoone-saas-prod.oss-cn-shenzhen.aliyuncs.com/379191899378599944/348297353509752872/common/2023/12/18/1702707997948~4bc59e71-2d8e-429a-af60-2a99d02beb83~.jpg"
          alt="">
        <img
          src="https://eeoone-saas-prod.oss-cn-shenzhen.aliyuncs.com/379191899378599944/348297353509752872/common/2023/12/18/1702707997948~4bc59e71-2d8e-429a-af60-2a99d02beb83~.jpg"
          alt="">
      </div> -->
      <div class="address_">
        <img src="https://css.eenet.com/onlineschool_eenet_fe/images/pages/home/icon_location.png" alt="">
        <span> {{ schoolData.address }}</span>
        <span style="float: right;color: blue;margin-right: 20px;">
          <img src="https://css.eenet.com/onlineschool_eenet_fe/images/pages/home/icon_car.png" style=" width: 20px;
  height: 20px;">
          <span><a>到校</a></span>
        </span>
      </div>

      <div style="height: 10ox;background-color: #F5F7F9;margin-top: 10px;border-radius: 50%;"><span
          style="color:#F5F7F9 ;">a</span></div>
      <div style="margin-top: 10px;height: 15px;">
        <span style="font-size: 22px;padding-top: 200px;margin-left: 20px;">云校数年积累</span>
        <img src="https://css.eenet.com/onlineschool_eenet_fe/images/pages/home/slogan.png" alt=""
          style="float: right;width: 156px;height: 20px;margin-right: 20px;margin-top: 5px;">
      </div>
      <div style="display: flex; margin-top: 40px;margin-left: 70px;">
        <div style="flex: 1;">
          <div>
            <span style="font-size: 30px;color: black;">2.9</span>
            <span style="color: black;">万人次</span>
          </div>
          <div style="color: #8D8D8D;font-size:20px;margin-top: 10px;">累计培训</div>
        </div>
        <div style="flex: 1;">
          <div>
            <span style="font-size: 30px;color: black;">2.8</span>
            <span style="color: black;">万人次</span>
          </div>
          <div style="color: #8D8D8D;font-size:20px;margin-top: 10px;">累计颁证</div>
        </div>
        <div style="flex: 1;">
          <div>
            <span style="font-size: 30px;color: black;">98.8</span>
            <span style="color: black;">%</span>
          </div>
          <div style="color: #8D8D8D;font-size:20px;margin-top: 10px;">平均通过率</div>
        </div>
        <div style="flex: 1;">
          <div>
            <span style="font-size: 30px;color: black;">97.5</span>
            <span style="color: black;">%</span>
          </div>
          <div style="color: #8D8D8D;font-size:20px;margin-top: 10px;">学员好评率</div>
        </div>
      </div>

      <br>
      <!-- 轮播图效果 -->
      <div style="height: 10ox;background-color: #F5F7F9;border-radius: 80%;"><span style="color:#F5F7F9 ;">a</span></div>
      <div style="margin-top: 10px;">
        <swiper :options="swiperOptions">
          <swiper-slide v-for="(item, index) in bannerList" :key="index">
            <img :src="item.image" alt="Banner Image"
              style="width: 37vw; height: 250px;margin-left: 1vw; border-radius: 10px;">
          </swiper-slide>
        </swiper>
      </div>

      <!-- 公告列表 -->
      <div class="notice-list">
        <div class="notice-title">公告</div>
        <ul v-if="noticeList.length > 0">
          <li v-for="(notice, index) in noticeList" :key="index">
            <a href="#" @click="gotoNoticeDetail(notice.id)">{{ notice.contentTitle }}</a>
          </li>
        </ul>
        <p v-else>暂无公告内容</p>
      </div>


      <div style="height: 5ox;background-color: #F5F7F9;margin-top: 10px;border-radius: 10px;"><span
          style="color:#F5F7F9 ;">a</span></div>


      <!-- 商品列表 -->
      <div class="notice-title">教育产品</div>
      <div class="product-list">
        <div class="product-item" v-for="(item) in limitedProductList" :key="item.id" @click="goToProductDetail(item.id)">
          <img :src="item.image" alt="product image" class="product-image" />
          <div class="product-info">
            <h3 class="product-name">{{ item.name }}</h3>
            <p class="product-price">￥{{ item.price }}</p>
          </div>
        </div>
      </div>
      <el-button v-if="productList.length >= 3" class="view-more-index" @click="viewMore">查看更多</el-button>
    </div>

    <home-view></home-view>
  </div>
</template>

<script>
import { jwtDecode } from 'jwt-decode';
import HomeView from '@/views/HomeView.vue';


export default {
  components: {
    HomeView,
  },
  data() {
    return {
      schoolData: [],  //学校资料数据
      bannerList: [], //banner列表数据
      noticeList: [], // 公告列表数据
      productList: [
        // 这里是你的商品数据
      ],
      userId: '',
      showAll: false, // 控制是否显示全部商品
      swiperOptions: {
        // 开启自动播放
        autoplay: {
          delay: 2500, // 设置自动切换的时间间隔，单位为毫秒
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        },
        loop: true, // 循环模式选项
      }
    };
  },
  computed: {
    limitedProductList() {
      return this.showAll ? this.productList : this.productList.slice(0, 3);
    },
  },
  methods: {
    // 获取产品列表数据
    fetchProductList() {
      this.$http.get('/api/products/queryProductOnStatus')
        .then(response => {
          this.productList = response.data.data.rows;
        })
        .catch(error => {
          this.$message.error("请求错误");
        });
    },
    //跳转产品详情页面
    goToProductDetail(productId) {
      const jwt = localStorage.getItem('jwt');
      if (jwt) {
        const decoded = jwtDecode(jwt);
        const studentId = decoded.id; // 确保你的token结构中有id字段
        const IdData = {
          productId: productId,
          studentId: studentId
        };
        this.$http.post('/api/students/addStudentBehavior', IdData, {
          headers: {
            'Content-Type': 'application/json'
          }
        }).then(response => {
          if (response.data.code === 1) {

          } else {
            this.$message.error(response.data.message);
          }
        })
          .catch(error => {
            // 处理请求失败的逻辑
            this.$message.error("报名请求出错，请稍后重试");
          });
        this.$router.push({ name: 'ProductDetail', params: { id: productId } });
      }
      else {
        this.$router.push({ name: 'ProductDetail', params: { id: productId } });
      }

    },

    viewMore() {
      this.$router.push({ name: 'productMore' });
    },

    // 跳转到产品详情页
    gotoProductDetail(noticeId) {
      this.$router.push(`/notice/${noticeId}`); // 使用vue-router实现路由跳转，假设公告详情页面的路由路径为/notice/:id
    },

    // 获取公告列表数据
    fetchNoticeList() {
      this.$http.get('/api/contents/selectOnStatusContent') // 假设后端API接口地址为/api/notice/list
        .then(response => {
          this.noticeList = response.data.data.rows;
        })
        .catch(error => {
          this.$message.error("请求错误");
        });
    },

    // 跳转到公告详情页
    gotoNoticeDetail(noticeId) {
      this.$router.push({ name: 'content', params: { id: noticeId } });
    },

    // 获取已发布banner
    fetchBannerData() {
      this.$http.get('/api/banner/selectOnStatusBanner') // 请求后端API获取轮播图片数据
        .then(response => {
          this.bannerList = response.data.data.rows; // 将获取到的数据存储到bannerList中
        })
        .catch(error => {
          this.$message.error("请求错误");
        });
    },
    getId() {
      const jwt = localStorage.getItem('jwt');
      if (jwt) {
        const decoded = jwtDecode(jwt);
        const userId = decoded.id; // 确保你的token结构中有id字段
      }
    }
  },
  mounted() {
    this.fetchProductList();//获取产品列表信息
    this.fetchNoticeList();// 调用获取公告列表数据的方法
    this.fetchBannerData(); // 在组件挂载时调用方法获取轮播图片数据
    //获取学校数据
    this.$http.get("/api/getSchool").then(result => {
      this.schoolData = result.data.data;
    }).catch(() => {
      this.$message.error("请求错误");
    });
  },
};
</script>

<style>
@import "@/style/index.css";
</style>